<%@page import="com.crossriver.crgis.cofo.beans.ApplicationBean"%>
<%@page import="com.crossriver.crgis.database.model.Application_C_of_O"%>
<%@ include file="/init.jsp"%>
<%@ taglib uri="http://java.sun.com/portlet_2_0" prefix="portlet" %>
<%@page import="com.liferay.portal.service.LayoutLocalServiceUtil"%>

<!-- This is for AJAX -->
<%@ taglib uri="http://liferay.com/tld/aui" prefix="aui" %>
<%@ page import="java.util.*" %>
<%@ page import="javax.portlet.PortletPreferences" %>
<!-- End of what is for AJAX -->

<portlet:defineObjects />

<portlet:renderURL var="selectpropertyURL">
	<portlet:param name="jspPage" value="/html/payments/select-property.jsp" />
</portlet:renderURL>


<portlet:resourceURL var="ajaxCallResourceURL" />
<%@ taglib uri="http://liferay.com/tld/aui" prefix="aui" %>
<liferay-portlet:actionURL name="showApplications" var="showApplications"></liferay-portlet:actionURL>

<liferay-ui:error key="application-retrieval-error" message="application-retrieval-error" /> 


<div id="main">
	<h1>Payments</h1>
	<div class="content"> 
	
	<p>Before we can start processing your application, you will need to pay the application fees.
	Once the payment is made, we will inform you about the outcome of the payment. If the payment is successful, 
	you will receive a mail from us confirm that. Also, if the is any issue with the payment, you will also be informed.
	For successful payment transaction, you will be informed by our back-office staff about the progress of your application.
	If you have more than one application, you need to make separate payments for each of them.
	</p>
	
	<%
	long howpaymentworks = LayoutLocalServiceUtil.getFriendlyURLLayout(themeDisplay.getScopeGroupId(), false, "/how-payment-works").getPlid();
	%>
	<liferay-portlet:renderURL portletName='' plid='<%= howpaymentworks %>' var="howpaymentworksURL"/>
	<p><a href="<%= howpaymentworksURL %>">Click Here to see how payment works!</a></p>
	
	<p>Please, choose one of the Supported Application Type to see list of your outstanding payments.  </p>
	<aui:form name="showApplications_fm" method="post"	 action="<%= showApplications.toString() %>"> 
		<aui:select name="paymentType" label="Supported Applications" onchange='showApplications();'>
	  	<aui:option value="">Choose An Application</aui:option>
	    <aui:option value="individual-certification">Indivdual - Certficate Of Occupancy</aui:option>
	    <aui:option value="organisation-certification">Organisation - Certificate Of Occupancy</aui:option>
	    <aui:option value="individual-re-certification">Indivdual - Re-Certficate Of Occupancy</aui:option>
	    <aui:option value="organisation-re-certitication">Organisation - Re-Certificate Of Occupancy</aui:option>
	    <aui:option value="individual-stateland">Indivdual - State Land</aui:option>
	    <aui:option value="organisation-stateland">Organisation - State Land</aui:option>
	 	</aui:select>
	</aui:form>
	<br>
	
	<%
	

	List<ApplicationBean> requestedApps = (List<ApplicationBean> ) request.getAttribute("requestedApps");
	
	if(requestedApps !=null && requestedApps.size() >=1)
	{
	%>
		<p>
		Applicant Type: <span class="ucase"><%=request.getAttribute("applicationType") %></span> <br>
		Application Type: <span class="ucase"><%=request.getAttribute("application") %></span>
		</p>	
		<p>Select each of these to see the outstanding payments :</p>	
	
		<table width="100%" id="paytab-2">
			<tr class="title">
				<td>&nbsp;</td>
				<td>Application ID</td>
				<td>Reference No.</td>
				<td>Start Date</td>
				<td>Submitted Date </td>
				<td>Application Status</td>
			</tr>
				<%
				for(int i=0; i<requestedApps.size(); i++){
					ApplicationBean app = requestedApps.get(i);
			 	%>
			<tr>
				<td>
					<input type="radio" name="RadioGroup1" value="<%=app.getFees() %>" onclick="getOutstadingPayment(this, '<%=app.getApplication_id() %>');" id="RadioGroup1_0">
				</td>
				<td> <%=app.getApplication_id() %> </td>
				<td><%=app.getReference_no() %></td>
				<td><%=app.getStart_date() %></td>
				<td><%=app.getSubmitted_date() %> </td>
				<td><%=app.getStatus() %> </td>
			</tr>
			
				<%
				}
				%>
		</table>
		
		<liferay-portlet:actionURL name="proceedToPayment" var="proceedToPayment"></liferay-portlet:actionURL>
		<aui:form name="proceedToPayment_fm" action="<%=proceedToPayment.toString() %>" method="post"> 
			<table width="100%" id="paytab-2" style="z-index:50">
			<tr>
			  <td width="22%">Outstanding (NAIRA =N=):</td>
			  <td width="38%"><aui:input label="" name="outstandingAmount" type="text" readonly="readonly"/></td>
				<td width="5%" rowspan="3" bgcolor="#DFFFDF"><img src="${renderRequest.contextPath}/images/success.png" width="30" height="30"></td>
				<td width="35%" rowspan="3" bgcolor="#DFFFDF" style="z-index:20">
			  	Please note that only full payment is currently supported. 
			  	The computed fees to be paid is already displayed and can not be changed.
			 	</td>
			</tr>
			<tr>
	   		<td>Payment Amount (NAIRA =N=):</td>
		   	<td><aui:input label=""  name="paymentAmount" type="text" readonly="readonly"/></td>
			</tr>
			<tr>
				<td colspan="2"> 	
					<aui:input  name="applicationId" type="hidden" />
					
					<div id="proceedToPayDiv" >	
						
					</div>
	     	</td>
		  </tr>
		</table>
 		</aui:form>
	<%
	}else{
	
	if(requestedApps !=null){
		%>
			<p>
			Applicant Type: <span class="ucase"><%=request.getAttribute("applicationType") %></span> <br>
			Application Type: <span class="ucase"><%=request.getAttribute("application") %></span>
			</p>	
			<p>There are no outstanding payment for the application type you selected!</p>	
			
		<%
			}
		}
		%>	
		
	</div>
</div>

<liferay-portlet:actionURL name="cancel" var="cancel"></liferay-portlet:actionURL>

<form name="<portlet:namespace/>paymentCancel_fm" method="post"	id="<portlet:namespace/>paymentCancel_fm" action="<%=cancel.toString()%>">
</form>

<script type="text/javascript">
<!--
	function showApplications()
	{
		document.forms["<portlet:namespace/>showApplications_fm"].submit();
	}
	
	function paymentCancel()
	{
		document.forms["<portlet:namespace/>paymentCancel_fm"].submit();
	}

	
	function getOutstadingPayment(fees, application_id)
	{
		
		var outstandingAmount= document.getElementById('<portlet:namespace />outstandingAmount');
		outstandingAmount.value=  Math.ceil(fees.value * 100) / 100;
		
		var paymentAmount= document.getElementById('<portlet:namespace />paymentAmount');
		paymentAmount.value=  Math.ceil(fees.value * 100) / 100;
		
		var applicationId= document.getElementById('<portlet:namespace />applicationId');
		
	 	applicationId.value=application_id; 
	 	
		document.getElementById("proceedToPayDiv").innerHTML = ' <span class="aui-button aui-button-reset"> <span class="aui-button-content"> <input class="aui-button-input aui-button-input-reset" type="reset" onClick="paymentCancel();" value="Cancel"> </span> </span> <span class="aui-button aui-button-submit"> <span class="aui-button-content"> <input class="aui-button-input aui-button-input-submit" type="submit" value="Proceed to Payment" id="proceed2Payment"> </span> </span>';
		
	}

//-->
</script>


<aui:script>

	Liferay.provide(
		window,
		'<portlet:namespace />getOutstadingPaymentOLD', //this is the method name
		function(applicationId) { //parameters counld be passed to the functions
			var A = AUI(); 
				var url = '<%= ajaxCallResourceURL.toString() %>';
				A.io.request(
					url,
					{
						//data to be sent to server
						data: {
							<portlet:namespace />applicationId: applicationId
						},
						dataType: 'json',

						on: {
							failure: function() {
							},

							success: function(event, id, obj) {
								var instance = this;


								//JSON Data coming back from Server
								
								var message = instance.get('responseData');

								if (message) { 
									
									var paymentAmount= document.getElementById('<portlet:namespace />paymentAmount');
									paymentAmount.value=message.paymentAmount;
							 
									var outstandingAmount= document.getElementById('<portlet:namespace />outstandingAmount');
									outstandingAmount.value=message.outstandingPayment;
									
									var applicationId= document.getElementById('<portlet:namespace />applicationId');
									
								 	applicationId.value=message.applicationId; 
								 	
								 	document.getElementById("proceedToPayDiv").innerHTML = ' <span class="aui-button aui-button-reset"> <span class="aui-button-content"> <input class="aui-button-input aui-button-input-reset" type="reset" onClick="paymentCancel();" value="Cancel"> </span> </span> <span class="aui-button aui-button-submit"> <span class="aui-button-content"> <input class="aui-button-input aui-button-input-submit" type="submit" value="Proceed to Payment" id="proceed2Payment"> </span> </span>';
									
								}
								else {
									
									alert('no data back from server');
								}
							}

						}
					}

				); //END of io Request

		},
		['aui-io']
	);  //End of Provide 1
	
	
	
</aui:script>